require(['jquery','underscore','api'], function ($,_,api) {
  _.templateSettings = _templateSettings;

  //条件
  $.get(api.baseUrl+api.designer.options, function (res) {
    console.log(res);
    var data = res.data;
    $('.filter').append(_.template($('#options-tpl').html())({data: data}));
  });

  //案例列表
  var designerUrl = api.baseUrl+api.designer.list;
  var option = {
    style: "",
    title: "",
    sorts: ""
  };
  getDesignerList(designerUrl);

  $(".filter").on("click","#title .item", function () {
    $(this).addClass("active").siblings().removeClass("active");
    var code = $(this).data("code");
    option.title = code;

    getDesignerList(designerUrl);
  });

  $(".filter").on("click","#styles .item", function () {
    $(this).addClass("active").siblings().removeClass("active");
    var code = $(this).data("code");
    option.style = code;

    getDesignerList(designerUrl);
  });

  var sortArr = new Array(3);
  $(".filter").on("click",".sort", function () {
    var sorts = $(this).data("sorts"),idx =$(this).index();
    $(this).toggleClass("active");
    sortArr[idx] = sorts;

    if($(this).hasClass("active")){
      $(this).data("sorts",sorts.toUpperCase())
    }else{
      $(this).data("sorts",sorts.toLowerCase())
    }

    var temArr = [];
    _.each(sortArr, function (item) {
      if(item){
        temArr.push(item);
      }
    });
    option.sorts = temArr.join(",");
    getDesignerList(designerUrl);
  });

  function getDesignerList(url){
    $.get(url,option,function (res) {
      var data = res.data;
      $(".main .row").empty().append(_.template($("#designer-item-tpl").html())({data: data}));
    });
  }

});